<!--分组页面-->

<!--提示信息-->
<blockquote class="layui-elem-quote layui-text">
    友情提示：本部门按开发分为硬件开发和软件开发。可以通过编辑分组，修改或删除小组成员。
</blockquote>
<!--分组信息-->
<div class="layui-tab-item layui-show">
    <div class="layuimini-container layuimini-page-anim">
        <div class="layuimini-main">
            <div>
                <!--工具栏-->
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-normal" lay-event="btn-expand">全部展开</button>
                        <button class="layui-btn " lay-event="btn-fold">全部折叠</button>
                        <button class="layui-btn layui-btn-warm" lay-event="addMember">添加成员</button>
                    </div>
                </script>

                <!--表格数据-->
                <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>

                <!--隐藏表单-->
                <div class="layuimini-main" style="display: none" id="addForm">
                    <form class="layui-form" id="layui-form" style="margin: 0 auto;width: 360px; height: 320px; padding-top: 40px;">
                        <!--分类，分组。联动-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类</label>
                            <div class="layui-input-inline">
                                <select name="yfbGroupClass" id="groupClass" lay-filter="filter" lay-verify="title" class="verify">
                                    <option >选择分类</option>
                                    <option value="硬件">硬件</option>
                                    <option value="软件">软件</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">分组</label>
                            <div class="layui-input-inline">
                                <select name="yfbGroupName" id="group" lay-verify="title" class="verify">
                                    <option>选择分组</option>
                                </select>
                            </div>
                        </div>
                        <!--姓名：带搜索框的下拉表-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">成员</label>
                            <div class="layui-input-inline">
                                <input type="hidden" name="yfbGroupUsernumber" id="yfbGroupUsernumber">
                                <input type="text" name="yfbGroupPeoplename" placeholder="请选择" lay-verify="propelName" autocomplete="off" class="layui-input" id="peopleName">
                            </div>
                        </div>
                        <!--职位：组长，组员-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类</label>
                            <div class="layui-input-inline">
                                <select name="yfbGroupPosition" lay-verify="title" class="verify">
                                    <option>选择职位</option>
                                    <option value="组长">组长</option>
                                    <option value="组员">组员</option>
                                </select>
                            </div>
                        </div>
                        <!--提交/重置按钮-->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    layui.use(['form', 'table', 'treetable', 'element', 'miniPage', 'tableSelect'], function () {
        let $ = layui.jquery,
            table = layui.table,
            treetable = layui.treetable,
            form = layui.form,
            miniPage = layui.miniPage;
            element = layui.element;
            tableSelect = layui.tableSelect;

        /**
         * 1.表格
         */

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.indexOf("选择") >= 0) {  //如果没有选择
                    return '请选择';
                }
                //peopleName
            },
            propelName: function (value) {
                if(value.length <= 0) {
                    return "请选择人员";
                }
            }
        });

        // 渲染表格
        layer.load(2);

        //初始化/刷新
        treetable.render({
            treeColIndex: 1,
            treeSpid: -1,
            treeIdName: 'yfbGroupId',
            treePidName: 'yfbGroupParentid',

            elem: '#munu-table',  /*添加tableid*/
            toolbar: '#toolbarDemo',  /*添加工具类id*/
            url: '/yfb/groups',  /*请求地址，可以放json，可以放请求地址*/
            page: false,  /*不分页*/
            cols: [[  /*数据*/
                {type: 'numbers'},
                {field: 'yfbGroupName', title: '组名'},
                {field: 'yfbGroupClass', title: '分类'},
                {field: 'yfbGroupPeoplename', title: '姓名'},
                {field: 'yfbGroupUsernumber', title: '员工编号'},
                {field: 'yfbGroupPosition', title: '职位'},
                {title: '操作', align: "center", templet: function (d) {
                    if(d.yfbGroupPosition != null && d.yfbGroupPosition != "") {  //如果职位不为空
                        let text = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return text;
                    } else {
                        return "";
                    }
                }}
            ]],
            done: function () {
                layer.closeAll('loading');
            }
        });

        //监听小组成员的删除
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.confirm('是否将该成员从小组移除？', function (index) {
                    //获取小组id:  data.id
                    $.get("/yfb/deleteGroup",
                        {"primaryKey": data.id},
                        function(result) {
                            if(result.code == 0) {
                                obj.del();
                                layer.msg("删除成功");
                                layer.close(index);
                            }
                        }, "json");
                });
            }
        });

        //监听工具栏
        table.on('toolbar(munu-table)', function(obj){
            switch(obj.event){
                case 'btn-fold':  /*全部折叠*/
                    treetable.foldAll('#munu-table');
                    break;
                case 'btn-expand':  /*全部展开*/
                    treetable.expandAll('#munu-table');
                    break;
                case 'addMember':  /*添加成员*/
                    //弹出层
                    layer.open({
                        type: 1
                        , title: "添加组员信息"  //台头
                        , content: $("#addForm")  //引入页面
                        , area: 'auto,auto'  //宽高自适应
                        , offset: 't'
                        , btn: ''
                        // , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        ,cancel: function(){  //右上角关闭回调
                            //清空表单数据
                            $("#layui-form")[0].reset();
                            //清空js加载的二级下拉栏
                            $("#group").empty();
                        }
                    });
                    break;
            };
        });

        //监听提交。弹出层的form表单
        form.on('submit(demo1)', function (data) {
            $.get("/yfb/addGroup",
                $("#layui-form").serialize(),
                function (result) {
                    if(result.code == 0) {  //成功
                        //清空表单数据
                        $("#layui-form")[0].reset();
                        //清空js加载的二级下拉栏
                        $("#group").empty();
                        //关闭当前弹出窗
                        layer.closeAll();
                        //表格重载
                        treetable.render({
                            treeColIndex: 1,
                            treeSpid: -1,
                            treeIdName: 'yfbGroupId',
                            treePidName: 'yfbGroupParentid',

                            elem: '#munu-table',  /*添加tableid*/
                            toolbar: '#toolbarDemo',  /*添加工具类id*/
                            url: '/yfb/groups',  /*请求地址，可以放json，可以放请求地址*/
                            page: false,  /*不分页*/
                            cols: [[  /*数据*/
                            {type: 'numbers'},
                            {field: 'yfbGroupName', title: '组名'},
                            {field: 'yfbGroupClass', title: '分类'},
                            {field: 'yfbGroupPeoplename', title: '姓名'},
                            {field: 'yfbGroupPosition', title: '职位'},
                            {title: '操作', align: "center", templet: function (d) {
                                    if(d.yfbGroupPosition != null && d.yfbGroupPosition != "") {
                                        let text = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                                        return text;
                                    } else {
                                        return "";
                                    }
                                }}
                        ]],
                            done: function () {
                            layer.closeAll('loading');

                        }
                        });
                    }
                },"json");
            return false;
        });

        /**
         * 2.表单
         */
        //刷新
        form.render();

        //监听下拉。当一级下拉选项改变，二级对应不同的选项
        form.on('select(filter)', function(data) {
            //设置二级下拉
            setGroup($("#groupClass").val());
            //设置小组成员
            setPeople($("#groupClass").val());
            //刷新
            form.render('select');
        });

    });

    //设置二级级联表选项：分组
    function setGroup(groupClass) {  //将选择的分类信息传过来：软件/硬件
        let groups_hardware = ['硬件一组', '硬件二组', '硬件三组', '硬件四组', '硬件五组'];
        let groups_software = ['软件一组', '软件二组', '软件三组', '软件四组', '软件五组'];
        let option;
        let temp;

        if(groupClass == "硬件") {  /*硬件*/
            temp = groups_hardware;
        }else if(groupClass == "软件") {  //软件
            temp = groups_software;
        }
        //先清空之前绑定的值
        $("#group").empty();

        if(temp.length != 0) {
            for (let i = 0; i < temp.length; i++) {
                option = "<option value='" + temp[i] + "'>" + temp[i] + "</option>";
                //添加
                $("#group").append(option);
            }
        }

    }

    //设置三级级联表选项：选人
    function setPeople(groupClass) {  //将选择的分类信息传过来：软件/硬件
        tableSelect.render({
            elem: '#peopleName',
            checkedKey: 'userId',
            searchKey: 'keyword',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	//搜索输入框的提示文字 默认关键词搜索
            table: {
                url: '/yfb/queryEmployees',  //请求
                where: {userPost: groupClass},  //其他参数
                page: true,  //开启分页
                limit: 3,
                limits: [3, 6, 9],  //可以选择分页
                cols: [[
                    { type: 'radio' },
                    { field: 'userName', title: '姓名' },
                    { field: 'userNum', title: '员工编号' },
                    { field: 'userPost', title: '职位' },
                    { field: 'userSex', title: '性别' },
                ]]
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值
                // elem:返回之前input对象；
                // data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.userName)
                });
                elem.val(NEWJSON.join(","));
                //将用户编号放到隐藏域中
                $("#yfbGroupUsernumber").val(data.data[0].userNum);
            }
        })
    }



</script>